<template>
	<view>
		<radio-group @change="radioChange">
			<view class="filter fboxCol" v-for="(item, index) in list" :key="item.id">
			  <view class="item fboxRow Ycenter">
				<view v-if="item.children" class="icon" :class="item.open ? 'on' : ''" @tap="open(item, index)">
				<text class="bksCIcon bks-c-ziyuan47down color-9899A1 font12" :class="item.open ? 'on' : ''"></text>
				</view>
				<view v-else class="icon">
					<text class="fboxRow Ycenter Xcenter color-9899A1">.</text>
				</view>
				<label class="flex1 fboxRow Ycenter" :key="item.id">
				<view class="flex1 fboxRow Ycenter font26 item" :class="radioId == item.id ? 'color-00C15D' : ''">{{item.name}}</view>
				<radio color="#00C15D" style="transform:scale(0.7)" :value="item.id" :checked="item.id === radioId" />
			 </label>
			 </view>
			  <view style="padding-left: 30rpx;" v-if="item.children && item.open">
				<tree :parent="item.id" :list="item.children" :radioId="radioId" @load="loadChild" @check="onChange" />
			  </view>
			</view>
		</radio-group>
	</view>
</template>

<script>
	import tree from './tree-sub.vue';
	export default {
		props:{
			list: {
				type: Array,
				default: ()=>{
					return []
				}
			},
			radioId: {
				type: [String, Number],
				default: ''
			}
		},
		components: {
			tree
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 展开
			open(item, index){
			  this.list[index].open =  !item.open
			  
			  if(item.hasChild && !item.open && !item.children){
				this.triggerEvent('load', {
				  that: this,
				  fun: this.childrenData,
				  id: item.id
				})
			  }
			},
			nameTap(){
				
			},
			onChange(){
				
			},
			loadChild(){
				
			},
			radioChange(e){
				const obj = {
					id: e.detail.value
				}
				this.$emit('change', obj)
			}			
		}
	}
</script>

<style lang="scss" scoped>
	.item{height: 80rpx;}
	.icon{padding:0 20rpx ;}
	.icon.on{transform: rotate(180deg);}
	// .filter{padding: 0 40rpx;}
</style>